<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            display: block;
        }

        /* #smallBox>img {
            width: 300px;
            height: 300px;
        } */
        

        #bigBox>img {
            /* width: 500px;
            height: 500px; */
            position: absolute;
        }

        #smallBox {
            position: relative;
            float: left;
            left: 50px;
            top: 50px;
        }

        #bigBox {
            float: left;
            margin: 70px;
            position: relative;
            display: none;
            width: 250px;
            height: 250px;
            overflow: hidden;
        }

        #marsk {
            width: 100px;
            height: 100px;
            background-color: rgba(230, 75, 147, 0.4);
            position: absolute;
            display: none;
        }
        #selectPic{
            position: absolute;
            top: 410px;
            left: 50px;
        }
        #selectPic > img{
            height: 50px;
            width: 50px;
            float: left;
            margin-right: 50px;
        }
    </style>
</head>

<body>
    <div id="smallBox">
        <div id="marsk"></div>
        <img src="./img/ylgz3.jpg" alt="" id="smallPic">
    </div>

    <div id="bigBox">
        <img src="./img/ylgz5.jpg" alt="" id="enlargePic">
    </div>

    <div id="selectPic">
        <img src="./img/ylgz3.jpg" alt="" id="secondPic0">
        <img src="./img/hy1.jpg" alt="" id="secondPic">
    </div>
</body>

</html>
<script>
    class enlarge {
        constructor() {
            this.smallBox = this.$('smallBox')
            this.marsk = this.$('marsk')
            this.bigBox = this.$('bigBox')
            this.enlargePic = this.$('enlargePic')
            this.secondPic = this.$('secondPic')
            this.secondPic0 = this.$('secondPic0')
            this.smallPic = this.$('smallPic')
            this.mouseEven()
            this.selectPicClick()
        }

        $ = id => document.getElementById(id)
        // 小盒子鼠标事件
        mouseEven() {
            this.smallBox.onmouseover = () => {
                this.marsk.style.display = 'block'
                this.bigBox.style.display = 'block'
            }
            this.smallBox.onmouseout = () => {
                this.marsk.style.display = 'none'
                this.bigBox.style.display = 'none'
            }
            this.smallBox.onmousemove = this.marskMove
        }
        // 小图遮罩层移动 
        marskMove = e => {
            this.moveWidth = e.pageX - this.smallBox.offsetLeft - this.marsk.offsetWidth / 2
            this.moveHeight = e.pageY - this.smallBox.offsetTop - this.marsk.offsetHeight / 2
            this.marsk.style.left = this.moveWidth + 'px'
            this.marsk.style.top = this.moveHeight + 'px'
            this.edgeControl()
            this.bigBoxMove()
        }
        // 边距控制
        edgeControl(){
            this.maxMoveWidth = this.smallBox.offsetWidth - this.marsk.offsetWidth
            this.maxMoveHeight = this.smallBox.offsetHeight - this.marsk.offsetHeight
            if (this.moveWidth < 0) {
                this.marsk.style.left = 0
            } else if (this.moveWidth > this.maxMoveWidth) {
                this.marsk.style.left = this.maxMoveWidth + 'px'
            }
            if (this.moveHeight < 0) {
                this.marsk.style.top = 0
            } else if (this.moveHeight > this.maxMoveHeight) {
                this.marsk.style.top = this.maxMoveHeight + 'px'
            }
        }
        // bigbox 图片对应移动
        bigBoxMove(){
            let largePicMaxMoveWidth = this.bigBox.offsetWidth - this.enlargePic.offsetWidth
            let bili = largePicMaxMoveWidth / this.maxMoveWidth
            this.enlargePic.style.left = parseInt(this.marsk.style.left) * bili + 'px'
            this.enlargePic.style.top = parseInt(this.marsk.style.top) * bili + 'px'
        }
        
        // selectPic 点击事件
        selectPicClick(){
            this.secondPic.onclick = () => {
                this.smallPic.setAttribute('src','./img/hy1.jpg')
                this.enlargePic.setAttribute('src','./img/hy2.jpg')
            }

            this.secondPic0.onclick = () => {
                this.smallPic.setAttribute('src','./img/ylgz3.jpg')
                this.enlargePic.setAttribute('src','./img/ylgz5.jpg')
            }
        }
    }

    var zhukehan = new enlarge()

</script>